<template>
	<view class="sp">
		<navigator url="../videocontent/videocontent">
			<view class="x">600斤的公牛不甘心被杀，宁愿跳进大海之中，结局令人遗憾</view>
		</navigator>
		<video class="y" style="width: 100%;height: 400rpx;"
			src="https://mp-2b43b1f4-b978-4b99-a588-ab4245dd9eb4.cdn.bspapp.com/videos/catAI.mp4">
		</video>
		<view class="dibu">
			<view class="wenzi">
				<view class="wenzizf">
					<image style="width: 45rpx;height: 45rpx;" src="../static/images/other/icon_male.jpg">
					</image>
				</view>
				<view class="wenzizf" style="font-size: 32rpx;">开心哈哈大笑...</view>
				<view class="wenzizf" style="color: #999999; margin-top: 0rpx;">|</view>
				<view :class="followState?'wenzizf followed': 'wenzizf unfollow'" @click="onClickFollow" >{{follow}}</view>
			</view>
			<view class="tupian">
				<view class="tupiandx">
					<image style="width: 35rpx;height: 35rpx;" src="../static/images/icons/xingxi.png"></image>
				</view>
				<view class="tupiandx">
					<image @click="onClickLike" style="width: 35rpx;height: 35rpx;" :src="like"></image>
				</view>
				<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "videoItemView",
		data() {
			return {
				followState:false,
				follow:"关注",
				islike:false,
				like:"../../static/images/icons/dianzan.png"
			};
		},
		props: {
			videoObj: {
				type: Object,
				required: true
			}
		},
		methods: {
			onClick() {
				console.log("newsObjectItemView---onClick--回调");
				this.$emit("onVideoItemClick", this.videoObj);
			},
			onClickFollow(){
				this.followState = !this.followState;
				if(this.followState){
					this.follow = "已关注";
				} else{
					this.follow = "关注";
				}
			},
			onClickLike(){
				this.islike = !this.islike;
				if(this.islike){
					this.like="../../static/images/icons/dianzan_red.png";
				} else{
					this.like="../../static/images/icons/dianzan.png";
				}
			}
		}
	}
</script>

<style>
	.unfollow{
		font-size: 32rpx;
		color: #DD524D;
		font-weight: bold;
	}
	
	.followed{
		font-size: 30rpx;
		color: #000;
	}
	
	
	.sp {
		border-bottom: 1rpx solid #e5eaf3;
		margin: 10rpx 10rpx 20rpx 20rpx;

	}

	.x {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.y {
		margin: 0rpx;
		flex: 1;
		/*自动适应宽度*/
	}
	
	.dibu {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		-webkit-justify-content: space-between;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
	}
	
	.wenzi {
		display: flex;
		flex-direction: row;
	
	}
	
	.wenzizf {
		margin-right: 20rpx;
	}
	
	.tupian {
		display: flex;
		flex-direction: row;
	}
	
	.tupiandx {
		margin-left: 60rpx;
	}
</style>